<!DOCTYPE html>


<html theme="dark" showBanner="true" hasBanner="false" > 
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/brands.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/solid.min.css" rel="stylesheet">
<script src="/hexo-blog/js/color.global.min.js" ></script>
<script src="/hexo-blog/js/load-settings.js" ></script>
<head>
  <meta charset="utf-8">
  
  
  

  
  <title>CSS函数大全（一）：运算、网格和伪类 | bressanone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="preload" href="/hexo-blog/css/fonts/Roboto-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="/hexo-blog/css/fonts/Roboto-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">

  <meta name="description" content="这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战 本系列目标是做一个css函数完全指南，将尽可能罗列css中所有的函数及其用法，当需要使用或者理解某个css函数的时候，只要来这里寻找就可以了。 数学运算calc最常用的函数之一，可以执行一些计算 1.el &#123; width: calc(100vw - 80px); &#125;  但是很多人都不知道的是，这里不仅可">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS函数大全（一）：运算、网格和伪类">
<meta property="og:url" content="http://example.com/2021/11/24/CSS%E5%87%BD%E6%95%B0%E5%A4%A7%E5%85%A8%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9A%E8%BF%90%E7%AE%97%E3%80%81%E7%BD%91%E6%A0%BC%E5%92%8C%E4%BC%AA%E7%B1%BB/index.html">
<meta property="og:site_name" content="bressanone">
<meta property="og:description" content="这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战 本系列目标是做一个css函数完全指南，将尽可能罗列css中所有的函数及其用法，当需要使用或者理解某个css函数的时候，只要来这里寻找就可以了。 数学运算calc最常用的函数之一，可以执行一些计算 1.el &#123; width: calc(100vw - 80px); &#125;  但是很多人都不知道的是，这里不仅可">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/2021/11/24/imgs/f575ae6f1be64e1cbde17d134299d262.png">
<meta property="og:image" content="http://example.com/2021/11/24/imgs/ee25feb848e4433c94b1ccce931b26b5.png">
<meta property="og:image" content="http://example.com/2021/11/24/imgs/f13bc82ca99e439ba1faa9a552676d10.png">
<meta property="og:image" content="http://example.com/2021/11/24/imgs/439caa4a49de4742903a0761fb049db4.png">
<meta property="og:image" content="http://example.com/2021/11/24/imgs/471dff87c016460396407577efc1435c.png">
<meta property="og:image" content="http://example.com/2021/11/24/imgs/f2b797abc9154267b021031cc121ca9b.png">
<meta property="article:published_time" content="2021-11-23T16:00:00.000Z">
<meta property="article:modified_time" content="2024-04-04T15:27:03.531Z">
<meta property="article:author" content="Zachary">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/2021/11/24/imgs/f575ae6f1be64e1cbde17d134299d262.png">
  
  
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-192.png" sizes="192x192">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-192.png" sizes="192x192">
  
  
<link rel="stylesheet" href="/hexo-blog/css/style.css">

<meta name="generator" content="Hexo 7.1.1"></head>

<body>
  
   
  <div id="main-grid" class="  ">
    <div id="nav" class=""  >
      <navbar id="navbar">
  <nav id="title-nav">
    <a href="/hexo-blog/">
      <div id="vivia-logo">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <div>bressanone </div>
    </a>
  </nav>
  <nav id="main-nav">
    
      <a class="main-nav-link" href="/hexo-blog/">主页</a>
    
      <a class="main-nav-link" href="/hexo-blog/archives">归档</a>
    
      <a class="main-nav-link" href="/hexo-blog/about">关于</a>
    
  </nav>
  <nav id="sub-nav">
    <a id="theme-btn" class="nav-icon">
      <span class="light-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M438.5-829.913v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-829.913Zm0 747.826v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-82.087ZM877.913-438.5h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537t29.476-12.174h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T877.913-438.5Zm-747.826 0h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T82.087-521.5h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T130.087-438.5Zm660.174-290.87-34.239 32q-12.913 12.674-29.565 12.174-16.653-.5-29.327-13.174-12.674-12.673-12.554-28.826.12-16.152 12.794-28.826l33-35q12.913-12.674 30.454-12.674t30.163 12.847q12.709 12.846 12.328 30.826-.38 17.98-13.054 30.653ZM262.63-203.978l-32 34q-12.913 12.674-30.454 12.674t-30.163-12.847q-12.709-12.846-12.328-30.826.38-17.98 13.054-30.653l33.239-31q12.913-12.674 29.565-12.174 16.653.5 29.327 13.174 12.674 12.673 12.554 28.826-.12 16.152-12.794 28.826Zm466.74 33.239-32-33.239q-12.674-12.913-12.174-29.565.5-16.653 13.174-29.327 12.673-12.674 28.826-13.054 16.152-.38 28.826 12.294l35 33q12.674 12.913 12.674 30.454t-12.847 30.163q-12.846 12.709-30.826 12.328-17.98-.38-30.653-13.054ZM203.978-697.37l-34-33q-12.674-12.913-13.174-29.945-.5-17.033 12.174-29.707t31.326-13.293q18.653-.62 31.326 13.054l32 34.239q11.674 12.913 11.174 29.565-.5 16.653-13.174 29.327-12.673 12.674-28.826 12.554-16.152-.12-28.826-12.794ZM480-240q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm-.247-82q65.703 0 111.475-46.272Q637-414.544 637-480.247t-45.525-111.228Q545.95-637 480.247-637t-111.475 45.525Q323-545.95 323-480.247t45.525 111.975Q414.05-322 479.753-322ZM481-481Z"/></svg></span>
      <span class="dark-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M480.239-116.413q-152.63 0-258.228-105.478Q116.413-327.37 116.413-480q0-130.935 77.739-227.435t206.304-125.043q43.022-9.631 63.87 10.869t3.478 62.805q-8.891 22.043-14.315 44.463-5.424 22.42-5.424 46.689 0 91.694 64.326 155.879 64.325 64.186 156.218 64.186 24.369 0 46.978-4.946 22.609-4.945 44.413-14.076 42.826-17.369 62.967 1.142 20.142 18.511 10.511 61.054Q807.174-280 712.63-198.206q-94.543 81.793-232.391 81.793Zm0-95q79.783 0 143.337-40.217 63.554-40.218 95.793-108.283-15.608 4.044-31.097 5.326-15.49 1.283-31.859.805-123.706-4.066-210.777-90.539-87.071-86.473-91.614-212.092-.24-16.369.923-31.978 1.164-15.609 5.446-30.978-67.826 32.478-108.282 96.152Q211.652-559.543 211.652-480q0 111.929 78.329 190.258 78.329 78.329 190.258 78.329ZM466.13-465.891Z"/></svg></span>
    </a>
    
    <div id="nav-menu-btn" class="nav-icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M177.37-252.282q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Zm0-186.218q-17.453 0-29.477-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T177.37-521.5h605.26q17.453 0 29.477 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T782.63-438.5H177.37Zm0-186.217q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Z"/></svg>
    </div>
  </nav>
</navbar>
<div id="nav-dropdown" class="hidden">
  <div id="dropdown-link-list">
    
      <a class="nav-dropdown-link" href="/hexo-blog/">主页</a>
    
      <a class="nav-dropdown-link" href="/hexo-blog/archives">归档</a>
    
      <a class="nav-dropdown-link" href="/hexo-blog/about">关于</a>
    
     
    </div>
</div>
<script>
  let dropdownBtn = document.getElementById("nav-menu-btn");
  let dropdownEle = document.getElementById("nav-dropdown");
  dropdownBtn.onclick = function() {
    dropdownEle.classList.toggle("hidden");
  }
</script>
    </div>
    <div id="sidebar-wrapper">
      <sidebar id="sidebar">
  
    <div class="widget-wrap">
  <div class="info-card">
    <div class="avatar">
      
      <div class="img-dim"></div>
    </div>
    <div class="info">
      <div class="username">Zachary </div>
      <div class="dot"></div>
      <div class="subtitle"> </div>
      <div class="link-list">
        
          <a class="link-btn" target="_blank" rel="noopener" href="https://github.com/zzy1661" title="GitHub"><i class="fa-brands fa-github"></i></a>
         
      </div>  
    </div>
  </div>
</div>

  
  <div class="sticky">
    
      


  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">分类</h3>
      <div class="category-box">
            <a class="category-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">
                前端笔记
                <div class="category-count">78</div>
            </a>
        
            <a class="category-link" href="/hexo-blog/categories/%E7%AE%97%E6%B3%95%E6%89%8B%E5%86%8C/">
                算法手册
                <div class="category-count">7</div>
            </a>
        </div>
    </div>
  </div>


    
      
  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">标签</h3>
      <ul class="widget-tag-list" itemprop="keywords"><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Ant-Design/" rel="tag">Ant Design</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/CSS/" rel="tag">CSS</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Canvas/" rel="tag">Canvas</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Docker/" rel="tag">Docker</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/ECMAScript-6/" rel="tag">ECMAScript 6</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/JavaScript/" rel="tag">JavaScript</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Less/" rel="tag">Less</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/MobX/" rel="tag">MobX</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/MongoDB/" rel="tag">MongoDB</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/NPM/" rel="tag">NPM</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/NestJS/" rel="tag">NestJS</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Node-js/" rel="tag">Node.js</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Postman/" rel="tag">Postman</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/React-js/" rel="tag">React.js</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Redux/" rel="tag">Redux</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/TypeScript/" rel="tag">TypeScript</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/UML/" rel="tag">UML</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Webpack/" rel="tag">Webpack</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Yeoman/" rel="tag">Yeoman</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%9E%B6%E6%9E%84/" rel="tag">架构</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/" rel="tag">正则表达式</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%BA%90%E7%A0%81/" rel="tag">源码</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E7%88%AC%E8%99%AB/" rel="tag">爬虫</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E7%AE%97%E6%B3%95/" rel="tag">算法</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a></li></ul>
    </div>
  </div>


    
  </div>
</sidebar>
    </div>
    <div id="content-body">
       


<article id="post-CSS函数大全（一）：运算、网格和伪类" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  
    
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 class="p-name article-title" itemprop="headline name">
        CSS函数大全（一）：运算、网格和伪类
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2021-11-23T16:00:00.000Z" itemprop="datePublished">2021-11-24</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            5k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <p>这是我参与11月更文挑战的第24天，活动详情查看：<a target="_blank" rel="noopener" href="https://juejin.cn/post/7023643374569816095" title="https://juejin.cn/post/7023643374569816095">2021最后一次更文挑战</a></p>
<p>本系列目标是做一个css函数完全指南，将尽可能罗列css中所有的函数及其用法，当需要使用或者理解某个css函数的时候，只要来这里寻找就可以了。</p>
<h2 id="数学运算"><a href="#数学运算" class="headerlink" title="数学运算"></a>数学运算</h2><h3 id="calc"><a href="#calc" class="headerlink" title="calc"></a>calc</h3><p>最常用的函数之一，可以执行一些计算</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.el</span> &#123; <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100vw</span> - <span class="number">80px</span>); &#125;</span><br></pre></td></tr></table></figure>

<p>但是很多人都不知道的是，这里不仅可以传长度，还可以计算角度、时间，它支持的值可以是</p>
<ul>
<li><a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Flength" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length"><code>&lt;length&gt;</code></a>、</li>
<li><a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Ffrequency" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/frequency"><code>&lt;frequency&gt;</code></a>(这个单位目前还没有被任何css属性用到), </li>
<li><a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fangle" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle"><code>&lt;angle&gt;</code></a>、</li>
<li><a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Ftime" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/time"><code>&lt;time&gt;</code></a>、</li>
<li><a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fpercentage" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage"><code>&lt;percentage&gt;</code></a>、</li>
<li><a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fnumber" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/number"><code>&lt;number&gt;</code></a>、</li>
<li><a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Finteger" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/integer"><code>&lt;integer&gt;</code></a></li>
</ul>
<p>另外还有一点：**<code>+</code> 和 <code>-</code> 运算符的两边必须要有空白字符。**，而<code>*</code> 和 <code>/</code> 这两个运算符前后不需要空白字符。</p>
<h3 id="max和min"><a href="#max和min" class="headerlink" title="max和min"></a>max和min</h3><p>取最大值或最小值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">width</span>: <span class="built_in">max</span>(<span class="number">10vw</span>, <span class="number">4em</span>, <span class="number">80px</span>);</span><br></pre></td></tr></table></figure>

<h3 id="clamp"><a href="#clamp" class="headerlink" title="clamp"></a>clamp</h3><p>当默认值小于最小值时取最小值，大于最大值时取最大值，否则取默认值。它接收三个参数：最小值、默认值、最大值。</p>
<p><code>clamp()</code> 支持的值有 <a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Flength" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length"><code>&lt;length&gt;</code></a>、<a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Ffrequency" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/frequency"><code>&lt;frequency&gt;</code></a>、<a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fangle" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle"><code>&lt;angle&gt;</code></a>、<a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Ftime" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/time"><code>&lt;time&gt;</code></a>、<a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fpercentage" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage"><code>&lt;percentage&gt;</code></a>、<a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fnumber" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/number"><code>&lt;number&gt;</code></a>、<a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Finteger" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/integer"><code>&lt;integer&gt;</code></a> </p>
<p><code>clamp(MIN, VAL, MAX)</code> 其实就是表示 <code>max(MIN, min(VAL, MAX))</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">font-size</span>: <span class="built_in">clamp</span>(<span class="number">1rem</span>, <span class="number">10vw</span>, <span class="number">2rem</span>);</span><br></pre></td></tr></table></figure>

<h2 id="网格"><a href="#网格" class="headerlink" title="网格"></a>网格</h2><p>除了上面两个涉及到计算的方法，在网格布局中还有两个<code>minmax</code>和<code>fit-content</code></p>
<h3 id="minmax"><a href="#minmax" class="headerlink" title="minmax"></a>minmax</h3><p>设置网格item宽的最大最小值</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">minmax</span>(max-content, <span class="number">300px</span>)</span><br><span class="line"><span class="built_in">minmax</span>(<span class="number">200px</span>, <span class="number">1</span>fr)</span><br></pre></td></tr></table></figure>

<p>在网格布局中，max-content代表最小值由内容决定（内容不被拥挤到换行），1fr指最大值占用剩余空间</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#container1</span> &#123;</span><br><span class="line">      <span class="attribute">display</span>: grid;</span><br><span class="line">      <span class="attribute">grid-template-columns</span>: <span class="built_in">minmax</span>(max-content, <span class="number">300px</span>) <span class="built_in">minmax</span>(<span class="number">200px</span>, <span class="number">1</span>fr) <span class="number">150px</span>;</span><br><span class="line">      <span class="attribute">grid-gap</span>: <span class="number">5px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">background-color</span>: <span class="number">#8cffa0</span>;</span><br><span class="line">      <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="selector-id">#container1</span>&gt;<span class="selector-tag">div</span> &#123;</span><br><span class="line">      <span class="attribute">background-color</span>: <span class="number">#8ca0ff</span>;</span><br><span class="line">      <span class="attribute">padding</span>: <span class="number">5px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">   &lt;<span class="selector-tag">div</span> id=&quot;container1&quot;&gt;</span><br><span class="line">      &lt;<span class="selector-tag">div</span>&gt;</span><br><span class="line">          内容决定宽度</span><br><span class="line">          但是不超过<span class="number">300px</span></span><br><span class="line">      &lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">      &lt;<span class="selector-tag">div</span>&gt;</span><br><span class="line">          弹性宽度，但是最少<span class="number">200px</span></span><br><span class="line">      &lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">      &lt;<span class="selector-tag">div</span>&gt;</span><br><span class="line">          固定<span class="number">150px</span>宽</span><br><span class="line">      &lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">      &lt;<span class="selector-tag">div</span>&gt;&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">      &lt;<span class="selector-tag">div</span>&gt;&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">      &lt;<span class="selector-tag">div</span>&gt;&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">  &lt;/<span class="selector-tag">div</span>&gt;</span><br></pre></td></tr></table></figure>

<p><img src="./../imgs/f575ae6f1be64e1cbde17d134299d262.png" alt="image.png"></p>
<h3 id="fit-content"><a href="#fit-content" class="headerlink" title="fit-content"></a>fit-content</h3><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">fit-content</span>(<span class="number">300px</span>)</span><br></pre></td></tr></table></figure>

<p>限制设置网格item宽度，当内容不超过这个值时，宽度为内容的宽度，如果内容过多，则宽度最大到这个限制的值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"> <span class="selector-id">#container2</span> &#123;</span><br><span class="line">        <span class="attribute">display</span>: grid;</span><br><span class="line">        <span class="attribute">grid-template-columns</span>: <span class="built_in">fit-content</span>(<span class="number">300px</span>) <span class="built_in">fit-content</span>(<span class="number">300px</span>) <span class="number">1</span>fr;</span><br><span class="line">        <span class="attribute">grid-gap</span>: <span class="number">5px</span>;</span><br><span class="line">        <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">        <span class="attribute">background-color</span>: <span class="number">#8cffa0</span>;</span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-id">#container2</span>&gt;<span class="selector-tag">div</span> &#123;</span><br><span class="line">        <span class="attribute">background-color</span>: <span class="number">#8ca0ff</span>;</span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">5px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">      &lt;<span class="selector-tag">div</span> id=&quot;container2&quot;&gt;</span><br><span class="line">    &lt;<span class="selector-tag">div</span>&gt;内容决定宽度&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">div</span>&gt;</span><br><span class="line">       即便内容再多，再多，再多,宽度也会被限制在<span class="number">300px</span></span><br><span class="line">    &lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">div</span>&gt;弹性&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">div</span>&gt;</span><br></pre></td></tr></table></figure>

<p><img src="./../imgs/ee25feb848e4433c94b1ccce931b26b5.png" alt="image.png"></p>
<h3 id="repeat"><a href="#repeat" class="headerlink" title="repeat"></a>repeat</h3><p>网格布局中还有一个函数<code>repeat</code>,允许以更紧凑的形式写入大量显示重复模式的列或行。</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">repeat(<span class="number">2</span>, <span class="number">50px</span> <span class="number">1</span>fr)</span><br></pre></td></tr></table></figure>

<p>可以用在grid-template-columns 和 grid-template-rows中。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">#container3 &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: repeat(2, 50px 1fr) 100px;</span><br><span class="line">  grid-gap: 5px;</span><br><span class="line">  box-sizing: border-box;</span><br><span class="line">  height: 200px;</span><br><span class="line">  width: 100%;</span><br><span class="line">  background-color: #8cffa0;</span><br><span class="line">  padding: 10px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">#container3 &gt; div &#123;</span><br><span class="line">  background-color: #8ca0ff;</span><br><span class="line">  padding: 5px;</span><br><span class="line">&#125;</span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container3&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>50px宽<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>弹性<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>50px宽<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>弹性<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>固定100px<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src="./../imgs/f13bc82ca99e439ba1faa9a552676d10.png" alt="image.png"></p>
<h2 id="伪类选择器函数"><a href="#伪类选择器函数" class="headerlink" title="伪类选择器函数"></a>伪类选择器函数</h2><h3 id="nth-child"><a href="#nth-child" class="headerlink" title=":nth-child"></a>:nth-child</h3><p><img src="./../imgs/439caa4a49de4742903a0761fb049db4.png" alt="image.png"></p>
<h3 id="nth-last-child"><a href="#nth-last-child" class="headerlink" title=":nth-last-child"></a>:nth-last-child</h3><p>从兄弟节点中从后往前匹配处于某些位置的元素</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 在所有兄弟节点中，从后往前</span></span><br><span class="line"><span class="comment">   选择所有4的倍数的节点 */</span></span><br><span class="line"><span class="selector-pseudo">:nth-last-child</span>(<span class="number">4</span>n) &#123;</span><br><span class="line">  <span class="attribute">color</span>: lime;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="nth-of-type"><a href="#nth-of-type" class="headerlink" title=":nth-of-type"></a>:nth-of-type</h3><p>针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 在每组兄弟元素中选择第四个 &lt;p&gt; 元素 */</span></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">:nth-of-type</span>(<span class="number">4</span>n) &#123;</span><br><span class="line">  <span class="attribute">color</span>: lime;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="nth-last-of-type"><a href="#nth-last-of-type" class="headerlink" title=":nth-last-of-type"></a>:nth-last-of-type</h3><p><strong><code>:nth-last-of-type(an+b)</code></strong>  这个 CSS <a href="https://developer.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FPseudo-classes" title="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">伪类</a> 匹配那些在它之后有 <code>an+b-1</code> 个相同类型兄弟节点的元素，其中 <code>n</code> 为正值或零值。它基本上和 <a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2F%3Anth-of-type" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type"><code>:nth-of-type</code></a> 一样，只是它从<strong>结尾</strong>处反序计数，而不是从开头处。</p>
<p>这个系列的选择器应该都很熟了，可以参考下面的例子</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">  <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>n) &#123;</span></span><br><span class="line"><span class="language-css">    <span class="attribute">color</span> :grey;</span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css">  <span class="selector-tag">li</span><span class="selector-pseudo">:nth-last-child</span>(<span class="number">3</span>) &#123;</span></span><br><span class="line"><span class="language-css">    <span class="attribute">background-color</span>: <span class="number">#ddd</span>;</span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css">  <span class="selector-tag">li</span><span class="selector-pseudo">:last-child</span> &#123;</span></span><br><span class="line"><span class="language-css">    <span class="attribute">background-color</span>: <span class="number">#aaa</span>;</span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css">  <span class="selector-tag">li</span><span class="selector-pseudo">:nth-of-type</span>(odd) &#123;</span></span><br><span class="line"><span class="language-css">    <span class="attribute">font-size</span>: <span class="number">1.5rem</span>;</span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>xxx li:nth-of-type(odd) <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>xxx<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>xxx li:nth-of-type(odd) li:nth-child(3n)<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>xxx <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>xxx li:nth-of-type(odd)<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>xxx li:nth-child(3n)<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>xxx li:nth-of-type(odd) li:nth-last-child(3)<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>xxx<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>xxx li:nth-of-type(odd) li:last-child li:nth-child(3n)<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src="./../imgs/471dff87c016460396407577efc1435c.png" alt="image.png"></p>
<h3 id="lang"><a href="#lang" class="headerlink" title=":lang"></a>:lang</h3><p>基于元素语言来匹配页面元素。国际化可能用到。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">      <span class="selector-pseudo">:lang</span>(en) &gt; <span class="selector-tag">q</span> &#123;</span><br><span class="line">        <span class="attribute">quotes</span>: <span class="string">&quot;\201C&quot;</span><span class="string">&quot;\201D&quot;</span><span class="string">&quot;\2018&quot;</span><span class="string">&quot;\2019&quot;</span>;</span><br><span class="line">        <span class="attribute">background-color</span>: beige;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="selector-pseudo">:lang</span>(fr) &gt; <span class="selector-tag">q</span> &#123;</span><br><span class="line">        <span class="attribute">quotes</span>: <span class="string">&quot;« &quot;</span> <span class="string">&quot; »&quot;</span>;</span><br><span class="line">        <span class="attribute">background-color</span>: aliceblue;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="selector-pseudo">:lang</span>(de) &gt; <span class="selector-tag">q</span> &#123;</span><br><span class="line">        <span class="attribute">quotes</span>: <span class="string">&quot;»&quot;</span> <span class="string">&quot;«&quot;</span> <span class="string">&quot;\2039&quot;</span><span class="string">&quot;\203A&quot;</span>;</span><br><span class="line">        <span class="attribute">background</span>: antiquewhite;</span><br><span class="line">      &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> lang=&quot;en&quot;&gt;</span><br><span class="line">      &lt;<span class="selector-tag">q</span>&gt;This English <span class="selector-tag">quote</span> has <span class="selector-tag">a</span> &lt;<span class="selector-tag">q</span>&gt;nested&lt;/<span class="selector-tag">q</span>&gt; <span class="selector-tag">quote</span> inside.&lt;/<span class="selector-tag">q</span>&gt;</span><br><span class="line">    &lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">div</span> lang=&quot;fr&quot;&gt;</span><br><span class="line">      &lt;<span class="selector-tag">q</span>&gt;This French <span class="selector-tag">quote</span> has <span class="selector-tag">a</span> &lt;<span class="selector-tag">q</span>&gt;nested&lt;/<span class="selector-tag">q</span>&gt; <span class="selector-tag">quote</span> inside.&lt;/<span class="selector-tag">q</span>&gt;</span><br><span class="line">    &lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">div</span> lang=&quot;de&quot;&gt;</span><br><span class="line">      &lt;<span class="selector-tag">q</span>&gt;This German <span class="selector-tag">quote</span> has <span class="selector-tag">a</span> &lt;<span class="selector-tag">q</span>&gt;nested&lt;/<span class="selector-tag">q</span>&gt; <span class="selector-tag">quote</span> inside.&lt;/<span class="selector-tag">q</span>&gt;</span><br><span class="line">    &lt;/<span class="selector-tag">div</span>&gt;</span><br></pre></td></tr></table></figure>

<p><img src="./../imgs/f2b797abc9154267b021031cc121ca9b.png" alt="image.png"></p>
<h3 id="not"><a href="#not" class="headerlink" title=":not"></a>:not</h3><p>用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为_反选伪类_（_negation pseudo-class_）。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h3</span><span class="selector-pseudo">:not</span>(<span class="selector-pseudo">:first</span>-child) &#123; <span class="attribute">margin-top</span>: <span class="number">0</span>; &#125;</span><br></pre></td></tr></table></figure>

<p>这个api有两个地方需要注意:</p>
<ul>
<li>这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， <code>body :not(table) a</code> 依旧会应用到表格元素 <a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FElement%2Ftable" title="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> 内部的 <a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FElement%2Fa" title="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> 上, 因为 <a href="https://developer.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FElement%2Ftr" title="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr"><code>&lt;tr&gt;</code></a>将会被 <code>:not(table)</code> 这部分选择器匹配。</li>
<li>由于伪元素不是简单的选择器，他们不能被当作 <code>:not()</code> 中的参数，形如 <code>:not(p::before)</code> 这样的选择器将不会工作。</li>
</ul>
<h3 id="is和-where"><a href="#is和-where" class="headerlink" title=":is和:where"></a>:is和:where</h3><p>:matches()和:any()都被重命名为了:is() <code>is</code>函数以一个选择器列表作为其参数，并选择能够被在该列表中的任意一个选择器匹配的元素。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">:is</span>(<span class="selector-tag">header</span>, <span class="selector-tag">main</span>, <span class="selector-tag">footer</span>) <span class="selector-tag">p</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 相当于 */</span></span><br><span class="line"><span class="selector-tag">header</span> <span class="selector-tag">p</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-tag">main</span> <span class="selector-tag">p</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-tag">footer</span> <span class="selector-tag">p</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>需要注意的是，选择器列表并不支持伪类。 <code>:where()</code>的优先级总是为0，但是<code>:is()</code>的优先级是由它的选择器列表中的优先级决定的。</p>

        
      </div>

         
    </div>
    
     
  </div>
  
    
<nav id="article-nav">
  <a class="article-nav-btn left "
    
      href="/hexo-blog/2021/11/25/CSS%E5%87%BD%E6%95%B0%E5%A4%A7%E5%85%A8%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%9A%E8%BD%AC%E6%8D%A2%E3%80%81%E5%8A%A8%E7%94%BB%E5%92%8C%E5%BD%A2%E7%8A%B6%20path/"
      title="CSS函数大全（二）：转换、动画和形状/path"
     >
    <i class="fa-solid fa-angle-left"></i>
    <p class="title-text">
      
        CSS函数大全（二）：转换、动画和形状/path
        
    </p>
  </a>
  <a class="article-nav-btn right "
    
      href="/hexo-blog/2021/11/23/React%20%E5%85%B3%E4%BA%8Eref%EF%BC%8C%E4%BD%A0%E6%83%B3%E7%9F%A5%E9%81%93%E7%9A%84%E9%83%BD%E5%9C%A8%E8%BF%99%E9%87%8C/"
      title="React 关于ref，你想知道的都在这里"
     >

    <p class="title-text">
      
        React 关于ref，你想知道的都在这里
        
    </p>
    <i class="fa-solid fa-angle-right"></i>
  </a>
</nav>


  
</article>





    </div>
    <div id="footer-wrapper">
      <footer id="footer">
  
  <div id="footer-info" class="inner">
    
    &copy; 2024 Zachary<br>
    <!-- Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> & Theme <a target="_blank" rel="noopener" href="https://github.com/saicaca/hexo-theme-vivia">Vivia</a> -->
      <a target="_blank" rel="noopener" href="https://beian.miit.gov.cn">苏ICP备20030005号-2</a>
  </div>
</footer>

    </div>
    <div class="back-to-top-wrapper">
    <button id="back-to-top-btn" class="back-to-top-btn hide" onclick="topFunction()">
        <i class="fa-solid fa-angle-up"></i>
    </button>
</div>

<script>
    function topFunction() {
        window.scroll({ top: 0, behavior: 'smooth' });
    }
    let btn = document.getElementById('back-to-top-btn');
    function scrollFunction() {
        if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
            btn.classList.remove('hide')
        } else {
            btn.classList.add('hide')
        }
    }
    window.onscroll = function() {
        scrollFunction();
    }
</script>

  </div>
  <script src="/hexo-blog/js/light-dark-switch.js"></script>
</body>
</html>
